<template>
  <el-form v-loading="loading" :model="model">
    <el-form-item label="AppId">
      <el-input v-model="model.app_id" placeholder="AppId"></el-input>
    </el-form-item>
    <el-form-item label="AppSecret">
      <el-input v-model="model.app_secret" placeholder="AppSecret"></el-input>
    </el-form-item>
    <el-form-item label="上行回调地址">
      <el-input v-model="model.mo_back" placeholder="上行回调地址"></el-input>
    </el-form-item>
    <el-form-item label="IP白名单">
      <el-input
        v-model="model.ip_white"
        type="textarea"
        placeholder="IP白名单"
      ></el-input>
    </el-form-item>
    <el-form-item style="text-align: right; margin: 0">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { SaveDevelop } from '@/api/app'
export default {
  props: {
    appInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {},
      loading: false,
    }
  },
  created() {
    this.model = {
      app_id: this.appInfo.app_id,
      mo_back: this.appInfo.mo_back,
      app_secret: this.appInfo.app_secret,
      ip_white: this.appInfo.ip_white.split('|').join('\n'),
    }
  },
  methods: {
    onCancel() {
      this.$emit('close')
    },
    async onSubmit() {
      this.$message.success('修改成功')
      this.loading = true
      await SaveDevelop({
        ...this.model,
        ip_white: this.model.ip_white.split('\n').join('|'),
      })
      this.loading = false
      this.onCancel()
    },
  },
}
</script>
